import { Notification, MessageBox } from 'element-ui'; // 引入 Element UI 组件
import { getToken } from '@/utils/auth'; // 获取用户 token

let socket;

export function initWebSocket() {
  const token = getToken(); // 获取 token，确保 WebSocket 鉴权
  const wsHost = `${process.env.VUE_APP_WS_HOST}?token=${token}`;

  // 如果已经有 WebSocket 连接，则不需要重新连接
  if (socket && socket.readyState === WebSocket.OPEN) {
    return;
  }

  socket = new WebSocket(wsHost);

  socket.onopen = () => {
    console.log('WebSocket connected');
  };

  socket.onmessage = (event) => {
    const message = JSON.parse(event.data); // 假设后端发送的是 JSON 格式的数据

    // 判断消息类型或内容，然后弹出通知
    if (message.type === 'NOTIFICATION') {
      // 使用 Element UI 的 Notification 弹窗提醒
      Notification({
        title: 'Notification',
        message: message.content,
        type: 'info',
        position: 'bottom-right',
        duration: 5000
      });
    }

    // 如果是系统维护通知，弹出确认框并禁止用户操作
    if (message.type === 'MAINTENANCE') {
      MessageBox.alert('系统将进行维护，所有操作已禁用。', '系统维护通知', {
        confirmButtonText: '确定',
        type: 'warning',
        callback: () => {
          // 在这里可以触发禁用操作逻辑
          disableAllActions(); // 假设有个函数用于禁用用户操作
        }
      });
    }
  };

  socket.onclose = () => {
    console.log('WebSocket disconnected');
  };

  socket.onerror = (error) => {
    console.error('WebSocket error:', error);
  };
}

export function getWebSocket() {
  return socket;
}

// 禁用所有操作的函数（例如禁用按钮、表单等）
function disableAllActions() {
  // 可以触发全局禁用逻辑，如通过 Vuex 或全局状态管理器控制页面交互
  document.body.style.pointerEvents = 'none'; // 禁用整个页面的用户交互
}
